import React from 'react';
import {useEffect, useState} from 'react';
import './index.css';

function Detail(props) {
  const data = [
    {
      step: 1,
      summary: '测量体温，采取严密防护措施，避免相互传染',
      photoClass: 'detailpage-photo1'
    },
    {
      step: 2,
      summary: '初期狗的体温高达39.5~41℃，持续2-3天左右，精神沉郁，稍有进食，眼结膜发红、眼睑肿胀，分泌出水样分泌物',
      photoClass: 'detailpage-photo2'
    },
    {
      step: 3,
      summary: '犬瘟热早期',
      photoClass: 'detailpage-photo3'
    },
    {
      step: 4,
      summary: '注意饮食，输液补充，杀细菌，消炎',
      photoClass: 'detailpage-photo4'
    }
  ]
  const [curPage, setCurPage] = useState(0)
  const [curInfo, setCurInfo] = useState(data[curPage])
  useEffect(()=>{
    setCurInfo(data[curPage])
    // eslint-disable-next-line
  },[curPage])
  return (
  <div className='detailpage-total'>
    <div className='detail-tabbar'>
      <div className='next-step' onClick={()=>{
        if(curPage<3)setCurPage(curPage+1)
        else return
        
      }}>下一步</div>
      <div className='detail-step'>
        <div className='circle-number'>①</div>
        <div className='circle-text'>接诊</div>
      </div>
      <div className='link-line'  style={ curPage < 1 ? {opacity: 0.3} : null }></div>
      <div className='detail-step'  style={ curPage < 1 ? {opacity: 0.3} : null }>
        <div className='circle-number'>②</div>
        <div className='circle-text'>病例检查</div>
      </div>
      <div className='link-line'  style={ curPage < 2 ? {opacity: 0.3} : null }></div>
      <div className='detail-step'  style={ curPage < 2 ? {opacity: 0.3} : null }>
        <div className='circle-number'>③</div>
        <div className='circle-text'>诊断结果</div>
      </div>
      <div className='link-line'  style={ curPage < 3 ? {opacity: 0.3} : null }></div>
      <div className='detail-step'  style={ curPage < 3 ? {opacity: 0.3} : null }>
        <div className='circle-number'>④</div>
        <div className='circle-text'>治疗方案</div>
      </div>
    </div>
    <div className='detail-summary'>
      <div className='summary-topbar'>简介</div>
    <div className='summary-text'>{localStorage.getItem('step'+(curPage+1))}</div>
    </div>
    <div className='detail-photo'>
    <div className='photo-topbar'>图片</div>
    <div className={curInfo.photoClass}></div>
    </div>
  </div>
  );
}

Detail.path = '/detail';
Detail.title = '病例详情';
Detail.meta = {
    keywords:
      '病例详情',
    description:
      '宠物医院 学习知识'
  };
  Detail.exact = true;

export default Detail;
